<template>
  <ContentWrap class="p-20px pt-0px">
    <div class="text-left color-#333 text-17px mb-24px">
      企业信息
    </div>
    <el-divider class="!mb-0px" />
    <ul class="list-group list-group-striped">
      <li class="list-group-item">
        <Icon class="mr-5px" icon="fa-solid:file-image" />
        <span>企业logo</span>
        <div class="relative" style="border: 1px solid #e7e7e7; width: 200px">
          <img :src="getFormData?.corpLogoUrl" width="200" />
        </div>
      </li>
      <li class="list-group-item">
        <Icon class="mr-5px" icon="ep:postcard" />
        <span>企业id</span>
        <div>{{ getFormData?.corpId }}</div>
      </li>
      
      <li class="list-group-item">
        <Icon class="mr-5px" icon="fa-solid:file-upload" />
        <span>企业用户上限</span>
        <div>{{ getFormData?.corpUserMax }}</div>
      </li>
      <li class="list-group-item">
        <Icon class="mr-5px" icon="ep:suitcase" />
        <span>企业名称</span>
        <div>{{ getFormData?.corpName }}</div>
      </li>
      <li class="list-group-item">
        <Icon class="mr-5px" icon="ep:suitcase" />
        <span>企业全称</span>
        <div>{{ getFormData?.corpFullName }}</div>
      </li>
      <li class="list-group-item">
        <Icon class="mr-5px" icon="fa-solid:qrcode" />
        <span>企业类型</span>
        <div>{{ TypeMap[getFormData?.corpSubjectType] }}</div>
      </li>
      <li class="list-group-item">
        <Icon class="mr-5px" icon="ep:calendar" />
        <span>创建日期</span>
        <div>{{ formatDate(getFormData.createTime) }}</div>
      </li>
    </ul>

    <el-divider class="!mb-0px" />

    <div class=" mb-20px flex mt-24px">
      <span class="color-#333 text-17px">通讯录授权</span>
      <div class="ml-20px">
        <el-tag type="info" v-if="getFormData?.contactAuthStatus == 0">未授权</el-tag>
        <el-tag type="success" v-if="getFormData?.contactAuthStatus == 1">已授权</el-tag>
      </div>
    </div>
    <div class="flex w-full justify-between items-center">
      <span class="text-14px color-#666">完成通讯录授权的企业可以在CRM系统内管理通讯录员工和客户</span>
      <el-button v-if="getFormData?.contactAuthStatus == 0" type="primary" class="ml-20px" @click="getContactAuthUrl">获取授权</el-button>
    </div>

    <el-divider class="!mb-0px" />

    <div class=" mb-20px flex mt-24px">
      <span class="color-#333 text-17px">获客助手授权</span>
      <div class="ml-20px">
        <el-tag type="info" v-if="getFormData?.acqAuthStatus == 0">未授权</el-tag>
        <el-tag type="success" v-if="getFormData?.acqAuthStatus == 1">已授权</el-tag>
      </div>
    </div>
    <div class="flex w-full justify-between items-center">
      <span class="text-14px color-#666">完成获客助手授权的企业可以在CRM系统内管理获客链接和获客统计</span>
      <el-button v-if="getFormData?.acqAuthStatus == 0" type="primary" class="ml-20px" @click="getAcqAuthUrl">获取授权</el-button>
    </div>
  </ContentWrap>
</template>

<script setup lang="ts">
import { formatDate } from '@/utils/formatTime'
import * as WecomBusinessHomeApi from '@/api/wecom/businessHome/index'

import * as WeComApiConfigApi from '@/api/wecom/apiconfig'
import { CopyDocument } from '@element-plus/icons-vue'

defineOptions({ name: 'WeComApiConfig' })

const message = useMessage() // 消息弹窗

const TypeMap = {
  1: '企业',
  2: '政府以及事业单位',
  3: '其他组织', 
  4: '团队号'
}

const props = defineProps({
  formData: {
    type: Object,
    default: () => {}
  }
})

// 获取被传递来的数据
const getFormData = computed(() => {
  if (props.formData != undefined) {
    return props.formData
  } else {
    return {
      permanentCode: undefined,
      corpId: undefined,
      corpLogoUrl: undefined,
      corpUserMax: undefined,
      corpName: undefined,
      corpFullName: undefined,
      corpSubjectType: undefined,
      createTime: undefined,
      contactAuthStatus:undefined,
      acqAuthStatus: undefined
    }
  }
})

const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
// 查看是否通讯录授权
const getContactAuthUrl = async () => {
  const data = await WecomBusinessHomeApi.getContactAuthUrl()
  if(data) {
    window.open(data)
    setTimeout(() => {
      // 发送操作成功的事件
      emit('success')
    }, '1000')

  }
}
// 查看是否通讯录授权
const getAcqAuthUrl = async () => {
  const data = await WecomBusinessHomeApi.getAcqAuthUrl()
  if(data) {
    window.open(data)
    setTimeout(() => {
      // 发送操作成功的事件
      emit('success')
    }, '1000')

  }
}
</script>
<style scoped lang="scss">
.text-center {
  position: relative;
  height: 120px;
  text-align: center;
}
.list-group-striped > .list-group-item {
  padding-right: 0;
  padding-left: 0;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

.list-group {
  padding-left: 0;
  list-style: none;
}

.list-group-item {
  padding: 11px 0;
  margin-bottom: -1px;
  font-size: 13px;
  display: grid;
  grid-template-columns: 20px 142px auto;
  align-items: center;
  margin-top: 10px;
  span {
    color: #666;
  }
}

</style>
